<template>

	<view class="imgbtn" :class="imgBtnClass" :style="[imgBtnStyle]">
		<image src="../../static/logo.png" :mode="imgMode" :style="[imageStyle]"></image>
		<text :style="[textSpaceStyle]">{{ title }}</text>
	</view>
</template>

<script>
	export default {
		name: "img-btn",
		props: {
			// 图片的位置，默认left,  可选值【left, right, top, bottom】
			imgPosition: {
				type: String,
				default: 'bottom'
			},
			// 文本
			title: {
				type: String,
				default: 'text'
			},
			// 字体大小
			fontSize: {
				type: [String, Number],
				default: '15px'
			},
			// 文本颜色
			color: {
				type: String,
				default: '#333333'
			},
			// 图片与文本的间距
			space: {
				type: [String, Number],
				default: '10px'
			},
			// 图片的宽度
			imgWidth: {
				type: [String, Number],
				default: '30px'
			},
			// 图片的高度
			imgHeight: {
				type: [String, Number],
				default: '10px'
			},
			// 图片的模式
			imgMode: {
				type: String,
				default: 'widthFix'
			},
			// 每个组件都有的父组件传递的样式，可以为字符串或者对象形式
			customStyle: {
				type: [Object, String],
				default: () => ({})
			},
		},
		data() {
			return {
			};
		},
		computed: {
			// 图片的宽度
			imageStyle() {
				const style = {},
					{
						imgWidth, imgHeight
					} = this;
				style.width = this.$uv.addUnit(imgWidth)
				style.height = this.$uv.addUnit(imgHeight)
				return style;
			},
			// 间距
			textSpaceStyle() {
				const style = {},
					{
						imgPosition,
						space
					} = this;
				style[`margin-${imgPosition}`] = this.$uv.addUnit(space)
				return style;
			},
			imgBtnClass() {
				let classes = [],
					{
						imgPosition
					} = this;
				classes = classes.concat([`imgbtn--${imgPosition}`])
				return classes.join(" ");
			},
			// 组件的样式
			imgBtnStyle() {
				const style = {};
				style.fontSize = this.$uv.addUnit(this.fontSize)
				style.color = this.color
				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle));
			},
		},

	}
</script>

<style lang="scss" scoped>
	.imgbtn {
		@include flex;
		align-items: center;
		justify-content: center;

		// flex: 1;
		&--left {
			flex-direction: row;
		}

		&--right {
			flex-direction: row-reverse;
		}

		&--top {
			flex-direction: column;
		}

		&--bottom {
			flex-direction: column-reverse;
		}
	}
</style>